<template>
  <div class="container">
    <el-row>
      <el-col class="topTitle">
        <div>
          <!--  <el-dropdown>-->
          <i class="icon iconfont iconfanhui1" @click="goBack"></i>
          <span class="titleStyle">
            {{ projectName }}
            <!--<i class="el-icon-caret-bottom"></i>-->
          </span>
          <!-- <span class="status">已开工</span> -->
          <span
            class="startStatus noStart"
            v-show="projectStatus == 'NOT_STARTED'"
            >未开工</span
          >
          <span class="startStatus" v-show="projectStatus == 'STARTED'"
            >已开工</span
          >
          <span
            class="startStatus startStop"
            v-show="projectStatus == 'STOPPED'"
            >已停工</span
          >
          <span
            class="startStatus StartOver"
            v-show="projectStatus == 'COMPLETED'"
            >已竣工</span
          >
        </div>
      </el-col>
    </el-row>
    <div class="mainCon">
      <div class="part">
        <el-row>
          <el-col :span="24">
            <div class="secondaryTitle secondaryTitleTheme">参保信息</div>
          </el-col>
        </el-row>
        <el-row v-if="Object.keys(infos).length">
          <el-col :span="24">
            <el-row class="detailInfoItemSty">
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >受理机构：</span
                >
                <span class="gridContent empContentSty color666 fontSizeF">{{
                  infos.bureau || '--'
                }}</span>
              </el-col>
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >单位编号：</span
                >
                <span class="gridContent empContentSty color666 fontSizeF">{{
                  infos.insNo || '--'
                }}</span>
              </el-col>
            </el-row>
            <el-row class="detailInfoItemSty">
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >缴费日期：</span
                >
                <span class="gridContent empContentSty color666 fontSizeF">{{
                  infos.insDate || '--'
                }}</span>
              </el-col>
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >参保单位：</span
                >
                <span class="gridContent empContentSty color666 fontSizeF">{{
                  infos.companyName || '--'
                }}</span>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="24">
            <el-row class="detailInfoItemSty">
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >社会保险缴费征集通知单：</span
                >
                <span
                  v-if="checkList.length > 0"
                  class="gridContent empContentSty color666 fontSizeF"
                >
                  <span>已上传</span>
                  <el-link
                    type="primary"
                    class="seeFile"
                    @click="toUploadFile()"
                    >查看</el-link
                  >
                  <contractEnclosureDialog
                    v-if="uploadContract"
                    dialogTitle="社会保险缴费征集通知单"
                    :tableData="checkList"
                    @closeDialog="hiddenDialog"
                  ></contractEnclosureDialog>
                </span>
                <span
                  v-else
                  class="gridContent empContentSty color666 fontSizeF"
                  >未上传</span
                >
              </el-col>
              <el-col :span="11" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >税收完税证明：</span
                >
                <span
                  v-if="insPayList.length > 0"
                  class="gridContent empContentSty color666 fontSizeF"
                >
                  <span>已上传</span>
                  <el-link
                    type="primary"
                    class="seeFile"
                    @click="toUploadFileTwo()"
                    >查看</el-link
                  >
                  <contractEnclosureDialog
                    v-if="uploadContractTwo"
                    dialogTitle="税收完税证明"
                    :tableData="insPayList"
                    @closeDialog="hiddenDialogTwo"
                  ></contractEnclosureDialog>
                </span>
                <span
                  v-else
                  class="gridContent empContentSty color666 fontSizeF"
                  >未上传</span
                >
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row class="insuranceBox" style="text-align: center" v-else>
          <img style="height: 123px" src="../../../static/img/noData.png" alt />
          <p class="empty">暂无信息,请督促企业及时添加</p>
        </el-row>
      </div>
      <div class="spacing"></div>
      <div class="part">
        <el-row>
          <el-col :span="24">
            <div class="secondaryTitle secondaryTitleTheme">
              人员备案记录
              <!--<span class="modify"  @click="modifyInsurance">去修改 >></span>-->
            </div>
          </el-col>
        </el-row>
        <el-row class="insuranceBox">
          <div class="total">
            <el-col :span="6">
              <span>累计备案人数：{{ recordInfo.empCount }}人</span>
            </el-col>
            <el-col :span="6">
              <span>累计备案人次：{{ recordInfo.count }}人次</span>
            </el-col>
            <el-col :span="12" style="text-align: right">
              <el-link type="primary">
                <label for="recordExcel">导入人员备案表&ensp;|</label>
              </el-link>
              <form id="recordExcelForm" style="display: none">
                <input
                  type="file"
                  id="recordExcel"
                  name="recordExcel"
                  @change="fileChange"
                />
              </form>
              <el-link
                type="primary"
                @click="downloadTemplate('csEmployeeRecordExcel')"
                >下载人员备案模板</el-link
              >
            </el-col>
          </div>
          <!-- 二次确认 -->
          <el-dialog
            title="注意"
            :visible.sync="confirmVisible"
            width="30%"
            center
            @close="closeConfirm"
          >
            <span
              >请确认是否导入？导入成功后将通知企业补充未录入人员的信息。</span
            >
            <span slot="footer" class="dialog-footer">
              <el-button @click="confirmVisible = false">取消导入</el-button>
              <el-button type="primary" @click="confirmFile"
                >确认导入</el-button
              >
            </span>
          </el-dialog>
          <el-table
            :data="recordList"
            v-loading="loading"
            :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
            highlight-current-row
            stripe
            style="border: 1px solid #dfe6ec"
          >
            <el-table-column
              prop="createTime"
              label="备案时间"
              align="center"
              :formatter="formatTd"
              min-width="35%"
            ></el-table-column>
            <el-table-column
              prop="employeeCount"
              label="备案人数"
              align="center"
              :formatter="formatTd"
              min-width="30%"
            ></el-table-column>
            <el-table-column
              prop="download"
              label="操作"
              align="left"
              :formatter="formatTd"
              width="280px"
            >
              <template slot-scope="scope">
                <el-link type="primary" @click="getRecordAnnex(scope.row)"
                  >人员备案表附件</el-link
                >
                <el-link type="primary" @click="downloadTable(scope.row)"
                  >下载人员备案表</el-link
                >
              </template>
            </el-table-column>
            <!-- 表格数据为空时，页面显示 -->
            <div slot="empty">
              <p class="empty">暂无信息，请及时补充</p>
            </div>
          </el-table>
          <div>
            <el-col :span="24" class="toolbar" style="text-align: right">
              <el-pagination
                @size-change="handleSizeChange1"
                @current-change="handleCurrentChange1"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 40, 50]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              ></el-pagination>
            </el-col>
          </div>
        </el-row>
      </div>
      <div class="spacing"></div>
      <div class="part">
        <el-row>
          <el-col :span="24">
            <div class="secondaryTitle secondaryTitleTheme">项目延期记录</div>
          </el-col>
        </el-row>
        <el-row class="insuranceBox">
          <div class="total">
            <el-col :span="6">
              <span>开工日期：{{ delayInfo.startDate }}</span>
            </el-col>
            <el-col :span="6">
              <span>建设周期：{{ delayInfo.cycle }}天</span>
            </el-col>
            <el-col :span="6">
              <span>计划竣工日期：{{ delayInfo.endDate }}</span>
            </el-col>
          </div>
          <el-table
            :data="delayList"
            v-loading="loading"
            :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
            highlight-current-row
            stripe
            style="border: 1px solid #dfe6ec"
          >
            <el-table-column
              prop="createTime"
              label="延期记录添加时间"
              align="left"
              :formatter="formatTd"
              width="180px"
            ></el-table-column>
            <el-table-column
              prop="delayDate"
              label="延期至"
              align="left"
              :formatter="formatTd"
              width="180px"
            ></el-table-column>
            <el-table-column
              prop="reason"
              label="延期原因"
              align="left"
              min-width="45%"
            >
              <template slot-scope="scope">
                <copyText
                  :tableIndex="scope.$index"
                  :copyTextName="scope.row.reason"
                  :columnName="'reason'"
                ></copyText>
              </template>
            </el-table-column>
            <el-table-column
              prop="detail"
              label="操作"
              align="left"
              :formatter="formatTd"
              width="180px"
            >
              <template slot-scope="scope">
                <el-link
                  type="primary"
                  @click="getDelayAnnex(scope.$index, scope.row)"
                  >延期申报证明附件</el-link
                >
              </template>
            </el-table-column>
            <!-- 表格数据为空时，页面显示 -->
            <div slot="empty">
              <p class="empty">暂无信息，请及时补充</p>
            </div>
            <!-- <div slot="empty" v-show="isShow">
                    <emptyTable emptyText="暂无信息，请及时补充"></emptyTable>
            </div>-->
          </el-table>
          <div>
            <el-col :span="24" class="toolbar" style="text-align: right">
              <el-pagination
                @size-change="handleSizeChange2"
                @current-change="handleCurrentChange2"
                :current-page="currentPageDelay"
                :page-sizes="[10, 20, 30, 40, 50]"
                :page-size="pagesizeDelay"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalDelay"
              ></el-pagination>
            </el-col>
          </div>
        </el-row>
      </div>
      <!-- 查看附件信息 -->
      <contractEnclosureDialog
        v-if="annexVisible"
        :dialogTitle="annexTitle"
        :tableData="annexData"
        @closeDialog="annexVisible = false"
      ></contractEnclosureDialog>
      <!-- <el-dialog center :title="annexTitle" :visible.sync="annexVisible"  :modal-append-to-body="false"  :append-to-body="true">
        <el-table :data="annexData">
          <el-table-column property="createTime" align="center" label="上传时间"></el-table-column>
          <el-table-column :property="name" :formatter="nameFormatter" align="center" label="文件名"></el-table-column>
          <el-table-column
            :property="name"
            :formatter="formatFormatter"
            align="center"
            label="文件格式"
          ></el-table-column>
          <el-table-column prop="download" label="操作" align="center">
            <template slot-scope="scope">
              <el-link type="primary" @click="downloadAnnex(scope.row)">下载附件</el-link>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog> -->
    </div>
  </div>
</template>

<script>
import common from '../../kits/common'

export default {
  name: 'ESinsuranceDetail',

  data() {
    return {
      id: '',
      projectId: '',
      projectName: '',
      projectStatus: '', //开工状态
      // 备案信息
      recordInfo: {},
      // 延期信息
      delayInfo: {},
      //备案记录数据
      recordList: [],
      // 延期记录数据
      delayList: [],
      infos: {}, //参保信息
      insPayList: [], //税收完税证明列表
      checkList: [], //社会保险缴费征集通知单列表
      annexVisible: false,
      annexTitle: '人员备案表附件信息',
      annexData: [], //附件信息
      delayFileList: [],
      pagesize: 10,
      pagesizeDelay: 10,
      currentPage: 1,
      currentPageDelay: 1,
      total: 1,
      totalDelay: 1,
      confirmVisible: false, //二次确认框
      uploadContract: false,
      uploadContractTwo: false,
    }
  },
  created() {
    //从其他页面跳详情默认tab为工伤保险一级列表
    if (this.$route.query.type == 'insuranceDetail') {
      this.$store.commit(
        'set_active_index',
        '/home/ESinsurance/ESinsuranceList'
      )
      this.$store.state.activeMenu = '/home/ESinsurance/ESinsuranceList'
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/ESinsurance/ESinsuranceList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    }
    this.id = this.$route.query.id
    this.projectId = this.$route.query.projectId
    this.projectName = this.$route.query.projectName
    this.projectStatus = this.$route.query.projectStatus
    this.getDetail(this.id) //参保详情
    this.getRecordInfo(this.projectId) //备案统计
    this.getDelayInfo() //延期统计信息
    this.getRecordList(this.projectId) //备案记录
    this.getDelayList(this.projectId) //延期记录
  },
  activated() {},
  methods: {
    // 下载模板
    downloadTemplate(type) {
      this.axios({
        method: 'post',
        url: 'api-su/salary/expand/findurl',
        data: {
          name: type,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            window.open(response.data.result.url)
          } else {
            this.$message({
              type: 'error',
              message: response.data.msg,
            })
          }
        })
        .catch((error) => {})
    },
    // 下载备案表PDF
    downloadTable(info) {
      window.location.href =
        common.commonApi +
        '/api-e/cs/emprecord/expand/downloadrecord?recordId=' +
        info.id +
        '&access_token=' +
        localStorage.getItem('access_token')
    },
    // 备案表附件信息
    getRecordAnnex(info) {
      this.annexVisible = true
      this.annexTitle = '人员备案表附件信息'
      this.axios({
        method: 'post',
        url: '/api-e/cs/emprecord/expand/recordfiles',
        data: {
          recordId: info.id,
        },
      })
        .then((response) => {
          this.annexData = response.data.result
        })
        .catch((error) => {})
    },
    // 延期附件信息
    getDelayAnnex(index, data) {
      this.annexVisible = true
      this.annexTitle = '延期申报附件信息'
      this.annexData = this.delayFileList[index]
    },
    // 下载附件
    downloadAnnex(annex) {
      this.annexVisible = false
      window.open(annex.url)
      // window.location.href=annex.url
    },
    // 导入上传备案表
    fileChange() {
      let Filedata = $('#recordExcel').val()
      if (!Filedata) {
        return
      }
      if (!/\.(xlsx)$/.test(Filedata)) {
        this.$message({
          message: '仅支持上传xlsx格式文件',
          type: 'warning',
        })
        $('#recordExcel').val('')
        return
      }
      this.confirmVisible = true
    },
    // 二次确认框
    confirmFile() {
      this.confirmVisible = false
      let _this = this
      var options = {
        url:
          common.uploadUrl +
          'api-e/cs/insdetail/expand/importEmployeeInsRecord',
        type: 'POST',
        dataType: 'json',
        data: {
          projectId: this.projectId,
        },
        headers: {
          Authorization: 'Bearer ' + localStorage.getItem('access_token'),
        },
        success: function (data) {
          const h = _this.$createElement
          if (!data.hasError) {
            const results = JSON.parse(data.result)
            if (results.notImportCount) {
              _this.$message({
                type: 'warning',
                message: h('div', null, [
                  h('p', null, '导入成功'),
                  h(
                    'p',
                    null,
                    '本次导入共' +
                      results.importCount +
                      '人 , 其中未录入项目实名制' +
                      results.notImportCount +
                      '人 , 请及时补充!'
                  ),
                ]),
                center: true,
              })
            } else {
              _this.$message({
                type: 'success',
                message: '导入成功',
                center: true,
              })
            }
            _this.getRecordList(_this.projectId)
            _this.getRecordInfo(_this.projectId)
          } else {
            _this.$message({
              type: 'error',
              message: h('div', null, [
                h('p', null, '导入失败,原因如下:'),
                h('p', null, data.msg),
              ]),
              center: true,
            })
          }
        },
        // clearForm: true,    // 成功提交后，清除表单填写内容
        resetForm: true, // 成功提交后，重置表单填写内容
        error: function () {},
      }
      // this.confirmVisible = true;
      // this.confirmFile(options);
      $('#recordExcelForm').ajaxSubmit(options)

      return false
    },
    // 二次确认框关闭
    closeConfirm() {
      $('#recordExcelForm').resetForm()
    },
    // 参保详情
    getDetail(id) {
      this.axios({
        method: 'post',
        url: 'api-e/cs/ins/expand/info',
        data: {
          insId: id,
        },
      })
        .then((response) => {
          this.infos = response.data.result
          this.insPayList = this.infos.fileList.filter(
            (v) => v.contentType === 'INS_PAY'
          )
          this.checkList = this.infos.fileList.filter(
            (v) => v.contentType != 'INS_PAY'
          )
        })
        .catch((error) => {})
    },
    // 获取备案信息
    getRecordInfo(projectId) {
      // "newEmpCount": 763   新增未备案人数
      this.axios({
        method: 'post',
        url: '/api-e/cs/emprecord/expand/statistics',
        data: {
          projectId,
        },
      })
        .then((response) => {
          this.recordInfo = response.data.result
        })
        .catch((error) => {})
    },
    // 获取延期信息
    getDelayInfo() {
      this.axios({
        method: 'post',
        url: '/api-p/project/expand/initdata',
        data: {
          id: this.projectId,
        },
      })
        .then((response) => {
          this.delayInfo = response.data.result
        })
        .catch((error) => {})
    },
    // 获取备案记录
    getRecordList(projectId, pageNo = 1, pageSize = 10) {
      this.axios({
        method: 'post',
        url: '/api-e/cs/emprecord/expand/list',
        data: {
          projectId,
          pageNo,
          pageSize,
        },
      })
        .then((response) => {
          this.recordList = response.data.result.results
          this.total = response.data.result.total
        })
        .catch((error) => {})
    },
    // 获取延期记录
    getDelayList(projectId, pageNo = 1, pageSize = 10) {
      this.axios({
        method: 'post',
        url: '/api-p/projectdelay/expand/delaylist',
        data: {
          projectId,
          pageNo,
          pageSize,
        },
      })
        .then((response) => {
          this.delayList = response.data.result.results
          this.delayList.forEach((v) => this.delayFileList.push(v.files))
          this.totalDelay = response.data.result.total
        })
        .catch((error) => {})
    },
    goBack() {
      this.$router.push({ path: '/home/ESinsurance/ESinsuranceList' })
      this.$store.commit('GOBACK_NAME', {
        oldUrl: '/home/ESinsurance/ESinsuranceList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    handleSizeChange1(val) {
      this.getRecordList(this.projectId, 1, val)
    },
    handleCurrentChange1(val) {
      this.getRecordList(this.projectId, val)
    },
    handleSizeChange2(val) {
      this.getDelayList(this.projectId, 1, val)
    },
    handleCurrentChange2(val) {
      this.getDelayList(this.projectId, val)
    },
    nameFormatter(row, col) {
      const file = row.name
      const fileName = file.lastIndexOf('.') // 取到文件名开始到最后一个点的长度
      const name = file.substring(0, fileName) // 截
      return name
    },
    formatFormatter(row, col) {
      const file = row.name
      const fileName = file.lastIndexOf('.') // 取到文件名开始到最后一个点的长度
      const fileNameLen = file.length // 取到文件名长度
      const fileType = file.substring(fileName + 1, fileNameLen) // 截
      return '.' + fileType
    },
    toUploadFile() {
      this.uploadContract = true
    },
    hiddenDialog() {
      this.uploadContract = false
    },
    toUploadFileTwo() {
      this.uploadContractTwo = true
    },
    hiddenDialogTwo() {
      this.uploadContractTwo = false
    },
  },
}
</script>

<style scoped lang="less">
.topTitle {
  height: 50px;
  // background-color: #e4ebf1;
  padding-left: 24px;
  padding-right: 24px;
  font-weight: bold;
  font-size: 18px;
  line-height: 50px;
  div {
    height: 50px;
    width: 100%;
    position: relative;
    &:after {
      position: absolute;
      right: -24px;
      top: 50px;
      left: -24px;
      height: 1px;
      content: '';
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      background-color: #e3e7e9;
      z-index: 10;
    }
  }
  .titleStyle {
    color: #333;
    font-size: 22px;
    .el-icon-caret-bottom {
      color: #71818e;
    }
  }
  /* 开工状态 */
  .startStatus {
    display: inline-block;
    width: 48px;
    height: 20px;
    line-height: 20px;
    margin-bottom: 1px;
    background: #009588;
    color: #fff;
    text-align: center;
    font-size: 12px;
    vertical-align: text-bottom;
    // border-radius: 4px;
  }
  .StartOver {
    background: #657282;
  }
  .noStart {
    background: #ffc100;
  }
  .startStop {
    background: #d9544f;
  }
  .saveBtn {
    margin-right: 24px;
    margin-top: 15.5px;
  }
}

.container .mainCon {
  background: none;
  top: 197px;
  padding: 0;
  .title {
    position: relative;
    padding-left: 20px;
    height: 24px;
    font-size: 16px;
    // border-bottom: 2px solid #f5f7fa;
    &::before {
      position: absolute;
      content: '';
      width: 4px;
      height: 24px;
      left: 0;
      top: 0;
      background: #265faa;
    }
    .modify {
      float: right;
      color: #409eff;
      font-size: 14px;
    }
  }
  .insuranceInfo {
    padding-left: 12px;
  }
  .insuranceBox {
    margin: 24px 0px 6px 14px;
    font-size: 14px;
    .insuranceDetail {
      .el-row {
        margin-bottom: 16px;
      }
      .el-col {
        margin-bottom: 6px;
      }
      .content {
        color: #2a2a2a;
      }
    }
    .picBox {
      margin-right: 12px;
      .picStyle {
        width: 100px;
        height: 100px;
        .imgStyle {
          width: 100%;
          height: 100%;
        }
      }
      .picTipStyle {
        text-align: center;
      }
    }
    .total {
      height: 28px;
    }
    .empty {
      color: #999999;
    }
  }
  .part {
    background: #ffffff;
    padding: 20px 24px 18px;
  }
}
/deep/ .el-dialog__footer {
  background: #fff;
  padding-bottom: 70px;
}

.nav ul {
  list-style: none;
}

.nav li {
  display: block;
  float: left;
}
.goBack {
  display: block;
  width: 136px;
  margin: 60px auto 0 auto;
}
.labelWidth {
  font-size: 14px;
  color: #666666;
  display: inline-block;
  height: 36px;
  float: left;
  position: relative;
}
// .labelWidth::before {
//   content: "";
//   display: block;
//   position: absolute;
//   top: 8px;
//   left: -10px;
//   width: 5px;
//   height: 5px;
//   background: #009588;
//   border-radius: 50%;
// }
.information {
  font-size: 14px;
  color: #151515;
  display: block;
  width: 98%;
}
/deep/ .el-table__header {
  width: 100% !important;
}
/deep/ .el-table__body {
  width: 100% !important;
}
</style>
